<template>
  <div class="publish-page">
    <el-card class="publish-card" shadow="never">
      <template #header>
        <div class="card-header">
          <el-icon size="24" color="#2e7d32"><Plus /></el-icon>
          <span>企业端：课题发布与编辑</span>
        </div>
      </template>
      
      <el-alert 
        title="请详细填写课题信息，确保描述准确清晰，有助于提高匹配成功率" 
        type="info" 
        show-icon 
        class="info-alert"
      />
      
      <el-form 
        ref="formRef" 
        :model="form" 
        :rules="rules" 
        label-width="120px" 
        class="publish-form"
        size="large"
      >
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item label="课题名称" prop="title">
              <el-input 
                v-model="form.title" 
                placeholder="请输入课题名称，建议简洁明了" 
                maxlength="100"
                show-word-limit
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="截止日期" prop="deadline">
              <el-date-picker 
                v-model="form.deadline" 
                type="date" 
                placeholder="选择截止日期"
                style="width: 100%"
                :disabled-date="disabledDate"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="研究方向" prop="researchDirection">
          <el-select 
            v-model="form.researchDirection" 
            multiple 
            placeholder="请选择研究方向，可多选"
            style="width: 100%"
            filterable
          >
            <el-option 
              v-for="d in disciplines" 
              :key="d" 
              :label="d" 
              :value="d"
            />
          </el-select>
          <div class="form-tip">选择与课题最相关的研究方向，有助于精准匹配</div>
        </el-form-item>

        <el-form-item label="需求描述" prop="description">
          <el-input 
            type="textarea" 
            :rows="6" 
            v-model="form.description" 
            placeholder="请详细描述课题背景、研究目标、技术需求等"
            maxlength="1000"
            show-word-limit
          />
          <div class="form-tip">建议包含：课题背景、研究目标、预期成果、应用场景等</div>
        </el-form-item>

        <el-form-item label="能力要求" prop="requirements">
          <el-input 
            type="textarea" 
            :rows="4" 
            v-model="form.requirements" 
            placeholder="请填写对申请人的能力、经验、专业背景等要求"
            maxlength="500"
            show-word-limit
          />
          <div class="form-tip">例如：专业背景、技能要求、工作经验、团队协作能力等</div>
        </el-form-item>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="预算金额">
              <el-input-number 
                v-model="form.budget" 
                :min="0" 
                :max="1000000"
                :step="1000"
                style="width: 100%"
                placeholder="可选，单位：元"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人">
              <el-input 
                v-model="form.contactPerson" 
                placeholder="项目负责人姓名"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="联系方式">
          <el-input 
            v-model="form.contactPhone" 
            placeholder="联系电话"
            maxlength="20"
          />
        </el-form-item>

        <el-form-item>
          <el-space>
            <el-button type="primary" size="large" @click="handleSubmit">
              <el-icon><Check /></el-icon>
              发布课题
            </el-button>
            <el-button size="large" @click="handleSaveDraft">
              <el-icon><Document /></el-icon>
              保存草稿
            </el-button>
            <el-button size="large" @click="handleReset">
              <el-icon><Refresh /></el-icon>
              重置表单
            </el-button>
          </el-space>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Plus, Check, Document, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const disciplines = [
  '人工智能', '机器学习', '深度学习', '计算机视觉', '自然语言处理',
  '新材料', '纳米材料', '生物材料', '能源材料', '电子材料',
  '网络安全', '信息安全', '数据安全', '网络安全', '密码学',
  '生物医学', '生物技术', '医学影像', '药物研发', '基因工程',
  '环境科学', '环境保护', '污染治理', '生态修复', '可持续发展',
  '电子工程', '通信工程', '微电子', '集成电路', '信号处理'
]

const form = reactive({
  title: '',
  researchDirection: [] as string[],
  description: '',
  requirements: '',
  deadline: '',
  budget: undefined as number | undefined,
  contactPerson: '',
  contactPhone: ''
})

const formRef = ref()

const rules = {
  title: [
    { required: true, message: '请输入课题名称', trigger: 'blur' },
    { min: 5, max: 100, message: '课题名称长度在 5 到 100 个字符', trigger: 'blur' }
  ],
  researchDirection: [
    { required: true, message: '请选择研究方向', trigger: 'change' },
    { type: 'array', min: 1, message: '至少选择一个研究方向', trigger: 'change' }
  ],
  description: [
    { required: true, message: '请输入需求描述', trigger: 'blur' },
    { min: 20, max: 1000, message: '需求描述长度在 20 到 1000 个字符', trigger: 'blur' }
  ],
  requirements: [
    { required: true, message: '请输入能力要求', trigger: 'blur' },
    { min: 10, max: 500, message: '能力要求长度在 10 到 500 个字符', trigger: 'blur' }
  ],
  deadline: [
    { required: true, message: '请选择截止日期', trigger: 'change' }
  ]
}

const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 8.64e7 // 不能选择今天之前的日期
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    ElMessage.success('课题发布成功！')
    console.log('提交表单:', form)
    // TODO: 调用API提交数据
  } catch (error) {
    ElMessage.error('请检查表单填写是否正确')
  }
}

const handleSaveDraft = () => {
  ElMessage.info('草稿已保存')
  console.log('保存草稿:', form)
  // TODO: 保存草稿逻辑
}

const handleReset = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  ElMessage.info('表单已重置')
}
</script>

<style scoped>
.publish-page {
  max-width: 1000px;
  margin: 0 auto;
}

.publish-card {
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary-color);
}

.info-alert {
  margin-bottom: 24px;
}

.publish-form {
  margin-top: 24px;
}

.form-tip {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

.el-form-item {
  margin-bottom: 24px;
}

.el-form-item__label {
  font-weight: 500;
  color: var(--text-primary);
}

.el-input,
.el-textarea,
.el-select,
.el-date-picker,
.el-input-number {
  border-radius: 8px;
}

.el-input:focus,
.el-textarea:focus,
.el-select:focus {
  border-color: var(--primary-color);
}

.el-button {
  border-radius: 8px;
  font-weight: 500;
}

.el-button--primary {
  padding: 12px 24px;
}

.el-button .el-icon {
  margin-right: 6px;
}
</style>


